<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
    <style>
        html {
            font-size: 4.267vw;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        header {
            width: 100%;
            height: 2.1875rem;
            /* background-color: antiquewhite; */
        }

        footer {
            width: 100%;
            height: 2.5rem;
            /* background-color: antiquewhite; */
        }

        #content {
            flex: 1;
            overflow: auto;
        }

        .title {
            width: 100%;
            height: 1.25rem;
        }

        .item {
            height: 6.25rem;
            width: 100%;
            display: flex;
            margin-top: .625rem;
        }

        .left {
            width: 20%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .middle {
            width: 60%;
            height: 100%;
            margin-left: 1%;
        }

        .pone {
            color: red;
        }

        .one {
            color: red;
            display: block;
        }

        .two {
            color: antiquewhite;
        }

        button {

            width: 2.5rem;
            height: 1.5rem;
            border-radius: .3125rem;
            display: block;
            margin: 1.25rem auto;
            color: aliceblue;
            border: none;
            background-color: orange;
        }

        ul {
            width: 100%;
            height: 100%;
            display: flex;
        }

        li {
            display: block;
            width: 25%;
            text-align: center;
            line-height: 2.5rem;
        }

        .bottom {
            height: 12.5rem;
            margin-top: .625rem;
            /* background-color: aquamarine; */
        }

        .otem {
            display: flex;
            justify-content: space-between;
        }

        .fir {
            width: 6.25rem;
            height: 9.375rem;
        }

        .hb {
            width: 6.25rem;
            height: 6.875rem;
            background-color: red;
            border-radius: .625rem;
        }

        .top {
            width: 100%;
            height: 70%;
            text-align: center;
            line-height: 4.375rem;
        }

        .bfoot {
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <h2>
            饿了么 </h2>
    </header>
    <div id="content">
        <div class="title">热门单品</div>
        <div class="item" v-for="(item,index) in tasklist" v-bind:key="index">
            <div class="left">
                <img v-bind:src="item.pic" alt="">
            </div>
            <div class="middle">
                <h3>{{item.name}}</h3>
                <p class="pone">{{item.pone}}</p>
                <span class="one">{{item.price}}</span>
                <span class="two">{{item.two}}</span>
            </div>
            <div class="right">
                <button>{{item.btn}}</button>
            </div>
        </div>
        <div class="bottom">
            <div class="title">通用红包兑换</div>
            <div class="otem">
                <div class="fir">
                    <div class="hb">
                        <div class="top">￥5</div>
                        <div class="bfoot">满30可用</div>
                    </div>
                    <p>吃货联盟红包</p>
                </div>
                <div class="fir">
                    <div class="hb">
                        <div class="top">￥5</div>
                        <div class="bfoot">满30可用</div>
                    </div>
                    <p>吃货联盟红包</p>
                </div>
                <div class="fir">
                    <div class="hb">
                        <div class="top">￥5</div>
                        <div class="bfoot">满30可用</div>
                    </div>
                    <p>吃货联盟红包</p>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <ul>
            <li>首页</li>
            <li>吃喝卡</li>
            <li>订单</li>
            <li>我的</li>
        </ul>
    </footer>
</body>

</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el: '#content',
        data: {
            tasklist: [
                { pic: './img/1.png', name: '脐橙三斤 快递到家', pone: '兑换后入手价8.9元', price: '10', two: '通用门店', btn: '立即兑' }, { pic: './img/2.png', name: '耙耙柑2斤快递到家', pone: '兑换后入手价9.9元', price: '30', two: '通用门店', btn: '立即兑' }, { pic: './img/3.png', name: '水果捞350g', pone: '兑换后入手价6.9元', price: '60', two: '通用门店', btn: '立即兑' },
            ]
        },

    })
</script>